import { menu } from "../../decorator";

const { ccclass, property } = cc._decorator;

@ccclass
@menu(__filename)
export default class flip3DAction extends cc.Component {
    @property(cc.Node)
    back: cc.Node = null;

    @property(cc.Node)
    front: cc.Node = null;

    private action = null;

    flipX(time = 0.3, reverse?: boolean, cb?: Function) {
        const scaleX = this.node.scaleX;
        const scaleY = this.node.scaleY;
        const flipY = reverse ? 20 : -20;

        this.action && this.node.stopAction(this.action);
        this.action = this.node.runAction(cc.sequence(
            cc.spawn(
                cc.scaleTo(time / 2, 0, scaleY),
                cc.skewTo(time / 2, 0, flipY)
            ),
            cc.callFunc(function () {
                this.back.active = !this.back.active;
                this.front.active = !this.front.active;
            }, this),
            cc.spawn(
                cc.scaleTo(time / 2, -scaleX, scaleY),
                cc.skewTo(time / 2, 0, 0)
            ),
            cc.callFunc(function () {
                this._action = null;
                cb && cb();
            }, this)
        ));
    }

    flipY(time = 0.3, cb?: Function) {
        const scaleX = this.node.scaleX;
        const scaleY = this.node.scaleY;

        this.action && this.node.stopAction(this.action);
        this.node.runAction(cc.sequence(
            cc.spawn(
                cc.scaleTo(time / 2, scaleX, 0),
                cc.skewTo(time / 2, 0, -20)
            ),
            cc.spawn(
                cc.scaleTo(time / 2, scaleX, -scaleY),
                cc.skewTo(time / 2, 0, 0)
            ),
            cc.callFunc(function () {
                this._action = null;
                cb && cb();
            }, this)
        ));
    }

    setFlipY(scaleY = 1) {
        this.node.scaleY = scaleY;
    }

    setFlipX(scaleX = 1) {
        this.node.scaleX = scaleX;
    }

    showBack() {
        this.back.active = true;
        this.front.active = false;
    }

    showFront() {
        this.front.active = true;
        this.back.active = false;
    }
}